<template>
<div class="plugin-management-container">
  <div class="main-box">
    <div class="main-nav">
      <p style="font-weight:600;">插件管理</p>
      <p>可在线安装、卸载、禁用、启用插件，同时支持添加本地插件。FastAdmin已上线插件商店 ，你可以发布你的免费或付费插件：<el-button type="text">https://www.fastadmin.net/store.html</el-button>
      </p>
    </div>
    <el-tabs v-model="activeName2" type="card" @tab-click="handleClick" style="margin-top:20px;">
      <el-tab-pane label="用户管理" name="all">全部</el-tab-pane>
      <el-tab-pane label="配置管理" name="application">完整应用</el-tab-pane>
      <el-tab-pane label="角色管理" name="developmentTest">开发测试</el-tab-pane>
      <el-tab-pane label="编辑器" name="editor">编辑器</el-tab-pane>
      <el-tab-pane label="云储存" name="cloudStorage">云储存</el-tab-pane>
      <el-tab-pane label="短信验证" name="SMSverification">短信验证</el-tab-pane>
      <el-tab-pane label="接口整合" name="InterfaceIntegration">接口整合</el-tab-pane>
      <el-tab-pane label="辅助增强" name="auxiliaryEnhancement">辅助增强</el-tab-pane>
      <el-tab-pane label="未归类" name="uncategorized">未归类</el-tab-pane>
    </el-tabs>
    <div class="flex-row flex-warp flex-justify-b" style="margin:20px 0">
      <div class="inline flex-row">
        <el-button style="background:#333" size="small" type="info" icon="el-icon-refresh"></el-button>
        <el-button size="small" type="danger" icon="el-icon-upload2">离线安装</el-button>
        <el-button-group style="vertical-align: top;">
          <el-button type="primary" size="small" icon="el-icon-edit">全部</el-button>
          <el-button type="primary" size="small" icon="el-icon-share">免费</el-button>
          <el-button type="primary" size="small" icon="el-icon-delete">付费</el-button>
          <el-button type="primary" size="small" icon="el-icon-delete">本地插件</el-button>
        </el-button-group>
        <el-button size="small" type="info">
          <svg-icon icon-class="user" />会员信息</el-button>
      </div>
      <div class="inline flex-row flex-justify-e flex-align-c">
        <el-input size="small" placeholder="搜索" style="margin-left:0px;width:350px;height:33px;"></el-input>
        <el-button size="small" icon="el-icon-search" @click="serchListData"></el-button>
      </div>
    </div>
    <el-table v-loading="loading" ref="orderTable" :data="tableData" :row-key="getRowKeys" style="width: 100%" border="true" @selection-change="dataListSelectionChange">
      <el-table-column label="前台" min-width="10">
        <template slot-scope="scope">
          <span>2</span>
        </template>
      </el-table-column>
      <el-table-column label="插件名称" min-width="45">
        <template slot-scope="scope">
          <span>在线命令<i class="el-icon-picture text-success"></i></span>
        </template>
      </el-table-column>
      <el-table-column label="介绍" min-width="50">
        <template slot-scope="scope">
          <span>admin</span>
        </template>
      </el-table-column>
      <el-table-column label="作者" min-width="25">
        <template slot-scope="scope">
          <span>Karson</span>
        </template>
      </el-table-column>
      <el-table-column label="价格" min-width="25">
        <template slot-scope="scope">
          <span class="text-success">免费</span>
        </template>
      </el-table-column>
      <el-table-column label="下载" min-width="25">
        <template slot-scope="scope">
          <span>admin</span>
        </template>
      </el-table-column>
      <el-table-column label="版本" min-width="25">
        <template slot-scope="scope">
          <span>admin</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" min-width="25">
        <template slot-scope="scope">
          <span>admin</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="35">
        <template slot-scope="scope">
          <span>admin</span>
        </template>
      </el-table-column>
    </el-table>
    <el-button-group style="vertical-align: top;">
      <el-button type="primary" size="small" icon="el-icon-edit">全部</el-button>
      <el-dropdown size="small" split-button type="primary">
        小型尺寸
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item>双皮奶</el-dropdown-item>
          <el-dropdown-item>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button type="primary" size="small" icon="el-icon-delete">付费</el-button>
      <el-button type="primary" size="small" icon="el-icon-delete">本地插件</el-button>
    </el-button-group>
  </div>
</div>
</template>

<script>
import DropdownMenu from '@/components/Share/dropdownMenu'

export default {
  name: 'Documentation',
  components: {
    DropdownMenu
  },
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.plugin-management-container {
  & .main-box {
    height: 400px;
    margin: 20px;
  }

  & .el-button+.el-button {
    margin-left: 0px;
    margin-bottom: 2px;
  }

  & .main-nav {
    padding: 20px;
    background: #e8edf0;
  }

  & .text-success {
    color: #18bc9c;
  }

  & .text-danger {
    color: #e74c3c;
  }
}
</style>
